<template>
  <li class="displayFlex">
    <div class="item-left">
      <p class="blue font16">2021</p>
      <p class="grey font14">/</p>
      <p class="grey font14">4.28</p>
    </div>
    <router-link
      :to="`/information/detail/${item.newsId}`"
      class="item-right flex1"
    >
      <p class="font18">{{ item.newsTitle }}</p>
      <div class="displayFlex alignCenter">
        <div class="img-box" v-if="item.newsPic">
          <img :src="item.newsPic" alt="" />
        </div>
        <div class="content grey9 font14">
          {{ item.newsSummary }}
        </div>
      </div>
    </router-link>
  </li>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      data: () => ({}),
    },
  },
  data() {
    return {
      nian: "",
      yueri: "",
    };
  },
  created() {
    this.nain = this.item.newsReleaseTime.slice(0, 4);
    this.yueri = this.item.newsReleaseTime.slice(5, 10);
  },
  methods: {
    goPage(id) {
      this.$router.push({
        path: "/information/detail",
        query: {
          id: id,
        },
      });
    },
  },
};
</script>
<style scoped>
p {
  margin: 0;
}
.item-left {
  width: 50px;
  text-align: center;
  margin-right: 20px;
}
.item-left p {
  line-height: 100%;
  margin-bottom: 4px;
}
li {
  width: 49%;
  margin-bottom: 36px;
}
.item-right > p {
  line-height: 20px;
  margin-bottom: 10px;
  cursor: pointer;
}
.item-right > p:hover {
  color: #2590f4;
}
.item-right .content {
  line-height: 22px;
}
.img-box {
  width: 160px;
  height: 90px;
  overflow: hidden;
  margin-right: 20px;
}
.img-box img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 90px;
}
</style>